// MyTag.vue
<template>
	<!-- 
    1. span 作为根元素，外部的 class/style 会直接应用到它上面。
    2. 使用 {{ text }} 渲染文本，更安全。
    3. :style 绑定计算属性，动态设置 padding 和背景色。
    4. v-bind="$attrs" 将外部的 class (用于margin) 等属性应用到此 span 上。
  -->
	<span class="tag" :style="tagStyles" v-bind="$attrs">
		{{ text }}
	</span>
</template>

<script lang="ts" setup>
import { defineProps, computed } from "vue";

// defineOptions({
//   inheritAttrs: false // 如果不希望非 prop 属性自动应用，可以设置。但这里我们需要它，所以保持默认 true 或不写。
// })

const props = defineProps({
	text: {
		type: String,
		default: "Tag",
	},
	theme: {
		type: String,
		default: "red", // 提供一个默认主题色
	},
	padding: {
		type: String,
		default: "10px", // 新增 padding prop，并设置默认值
	},
});

// 使用计算属性来动态生成样式，这是 Vue 的推荐做法
const tagStyles = computed(() => {
	return {
		backgroundColor: props.theme,
		padding: props.padding,
	};
});
</script>

<style lang="less" scoped>
.tag {
	/* 
    移除了 padding 和 background-color，因为它们现在是动态的。
    也移除了外层的 .wrap-tag 和它的 margin。
  */
	display: inline-block; /* span 默认是 inline，设置成 inline-block 让 padding/margin 表现更符合预期 */
	font-size: 18px;
	color: #fff;
	border-radius: 5px;
	line-height: 1.5; /* 增加行高以改善垂直居中感 */
}
</style>
